<template>
	<view class="page-content" style="padding-bottom: 320rpx;">
		<view class="pd-20 display_row_btn_center" style="padding-right: 0;" v-if="user.id">
			<view class="itemBaseBox" @click.stop="goPage('/pages/center/info','navigateTo',true)">
				<u-image :src="user.headimg" width="130rpx" height="130rpx" shape="circle" v-if="user.headimg">
				</u-image>
				<open-data type="userAvatarUrl" class="userinfo-avatar" v-else></open-data>
				<view class="itemBase f_28">
					<view class="display_row_btn_center">
						<text class="c_333333 title" v-if="user.username">{{user.username}}</text>
						<open-data type="userNickName" class="c_333333 title" v-else>
						</open-data>
						<view class="bgVip">
							<view class="ml-10">
								<u-image
									src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%88%9B%E4%BA%AB%E9%9D%92%E9%93%9Cvip1.png"
									width="150rpx" height="40rpx" mode="widthFix">
								</u-image>
							</view>
							<text class="c_ffffff f_20 vipText">{{user.vip_name}}</text>
						</view>
					</view>
					<view class="display_row_btn_center">
						<text class="c_333333 mt-8">邀请码：{{user.invitation_code}}</text>
						<u-line direction="col" color="#000000" margin="0rpx 10rpx" length="80%"></u-line>
						<text class="status mt-8 c_C62B2C f_24" @click.stop="copyCode(user.invitation_code)">复制</text>
					</view>
				</view>
			</view>
			<view style="flex: 1;" class="display_row_center"
				@click.stop="goPage('/pages/center/info','navigateTo',true)">
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="pd-20 display_row_btn_center" style="padding-right: 0;" v-else>
			<view class="itemBaseBox">
				<u-image :src="img" width="130rpx" height="130rpx"></u-image>
				<view v-if="!isRegister">
					<u-button text="登陆" :hairline="true" type="primary" :plain="true" size="large" @click="checkLogin">
					</u-button>
				</view>
				<template v-else>
					<!-- <view v-if="ivcode!=''">
						<u-button text="注册" :hairline="true" type="primary" :plain="true" size="large"
							openType="getUserInfo" @click="doLogin">
						</u-button>
					</view> -->
					<view>
						<u-button text="注册" :hairline="true" type="primary" :plain="true" size="large" @click="showPpo">
						</u-button>
					</view>
				</template>
			</view>
		</view>

		<view class="incomeBox1">
			<view class="incomeBox2">
				<view class="c_ffffff display_row_btn_center" style="flex: 1;">
					<view class="display_row_btn_center pl-20">
						<u-icon name="question-circle" color="#ffffff" size="18"></u-icon>
						<text class="ml-10" style="font-size: 24rpx;">升级级别获得更多权益</text>
					</view>
					<view class="more bg_B82B2C c_ffffff" @click="goPage('/pages/center/upgrade','navigateTo',true)">
						了解更多>
					</view>
				</view>
				<view style="flex:4;" class="incomeInfo pd-20 display_col_center">
					<view class="display_row_btn_center" style="flex:5;width: 100%;">
						<view class="display_row_btn_center income">
							<view class="display_col_center">
								<view class="now">
									<text>￥</text>
									<text>{{income?income.money.can:0}}</text>
								</view>
								<text class="c_999999 f_24">可提现收益</text>
							</view>
							<view class="display_col_center ml-8">
								<view class="pre">
									<text>￥</text>
									<text>{{income?income.money.pre:0}}</text>
								</view>
								<text class="c_999999 f_24">上次提现收益</text>
							</view>
						</view>
						<view class="c_ffffff incomeBtn f_28" @click="goPage('/pages/center/income','switchTab',true)">
							我的收益
						</view>
					</view>
					<u-line direction="row" color="#999999" dashed></u-line>
					<view class="display_row_btn_center" style="flex:4;width: 100%">
						<view class="display_row_center" style="width: 49%;">
							<view class="display_col_center">
								<view class="pre">
									<text>￥</text>
									<text style="font-weight: 600;">{{income?income.date.yesterday:0}}</text>
								</view>
								<text class="c_999999 f_24">昨日收益</text>
							</view>
							<!-- <text class="c_999999 f_24 ml-8">34单</text> -->
						</view>
						<u-line direction="col" color="#999999" margin="0rpx 10rpx" length="80%"></u-line>
						<view class="display_row_center" style="width: 49%;">
							<view class="display_col_center">
								<view class="pre">
									<text>￥</text>
									<text style="font-weight: 600;">{{income?income.date.week:0}}</text>
								</view>
								<text class="c_999999 f_24">本周收益</text>
							</view>
							<!-- <text class="c_999999 f_24 ml-8">34单</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="display_row_btn_center pd-20">
			<view class="bg_fff display_row_center mdBaritem"
				@click.stop="goPage('/pages/center/accountList','navigateTo',true)">
				<view class="display_col_center mdBar ac">
					<text>帐号</text>
					<text class="mt-20 c_999999 f_24">我的推广渠道</text>
				</view>

				<view style="margin-left: 30rpx;">
					<u-image src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E8%B4%A6%E5%8F%B7.png"
						width="60rpx" height="60rpx"></u-image>
				</view>
			</view>

			<view class="bg_fff display_row_center mdBaritem"
				@click.stop="goPage('/pages/center/invitation','navigateTo',true)">
				<view class="display_col_center mdBar ac">
					<text style="color: #B12829;">邀请</text>
					<text class="mt-20 c_999999 f_24">专属海报生成</text>
				</view>

				<view style="margin-left: 30rpx;">
					<u-image
						src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B.png"
						width="80rpx" height="70rpx"></u-image>
				</view>
			</view>
		</view>

		<view class="otherMune">
			<view class="bg_fff pl-20 pr-20" style="border-radius: 10rpx;">
				<!-- <view class="display_row_btn_center menuParent"
					@click="goPage('/pages/center/mission','navigateTo',true)">
					<view class="menuBox">
						<image
							src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%85%A8%E9%83%A8%E8%AE%A2%E5%8D%95.png">
						</image>
						任务出单
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view> -->
				<u-line direction="row" color="#999999"></u-line>
				<view class="display_row_btn_center menuParent"
					@click="goPage('/pages/tabbar/tabbar-2/tabbar-2','switchTab',true)">
					<view class="menuBox">
						<image src="../../../static/img/tabbar/publishactive.png"></image>
						我的发布
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<u-line direction="row" color="#999999"></u-line>
				<view class="display_row_btn_center menuParent"
					@click="goPage('/pages/center/cashAccount','navigateTo',true)">
					<view class="menuBox">
						<u-icon name="red-packet-fill" color="#333" size="28" :customStyle="{marginRight: '10rpx'}">
						</u-icon>
						提现账户
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<u-line direction="row" color="#999999"></u-line>
				<view class="display_row_btn_center menuParent"
					@click="goPage('/pages/center/cooperation','navigateTo',false)">
					<view class="menuBox">
						<image
							src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E9%82%80%E8%AF%B7%E5%A5%BD%E5%8F%8B.png">
						</image>
						商务合作
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<u-line direction="row" color="#999999"></u-line>
				<view class="display_row_btn_center menuParent"
					@click="goPage('/pages/webview/webview?tag=getService','navigateTo',false)">
					<view class="menuBox">
						<image
							src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E6%A4%AD%E5%9C%86%202%20%E6%8B%B7%E8%B4%9D.png">
						</image>
						客服
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
				<u-line direction="row" color="#999999"></u-line>
				<view class="display_row_btn_center menuParent"
					@click="goPage('/pages/webview/webview?tag=getAboutUs','navigateTo',false)">
					<view class="menuBox">
						<image
							src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E6%8B%9B%E8%81%98%E7%AE%A1%E7%90%86.png">
						</image>
						关于我们
					</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
		</view>

		<view class="changeUser" v-if="user">
			<u-button text="切换用户" size="large" shape="circle" color="#ccc" @click="loginOther"
				:customStyle='{height: "40px"}'></u-button>
		</view>

		<view class="btmLogoBox" v-if="show_support">
			<u-image
				src="https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221115101157.png"
				width="130rpx" height="45rpx"></u-image>
			<view class=" mt-20">
				<text class="c_999999 f-26">圣玛尼亚软件技术支持</text>
			</view>
		</view>

		<m-login ref="login" :zIndex="1000000000" @success="loginRes" @error="loginError"></m-login>

		<uni-popup type="center" ref="popup" background-color="#ffffff">
			<view style="height: 400rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view>
					<view class="popTitle">
						注册
						<view style="position: absolute;right: 10px;" @click="closePop">
							<u-icon name="close" color="#000" size="20px"></u-icon>
						</view>
					</view>
					<u-divider :customStyle="{margin:'0px'}"></u-divider>
				</view>
				<view style="flex: 1;" class="display_col_center">
					<input class="uni-input" type="text" focus placeholder="请输入邀请码" v-model="ivcode"
						style="text-align: center;" />
				</view>
				<view style="display: flex;flex-direction: row;">
					<u-button type="success" text="注册" :customStyle="{flex:1}" @getphonenumber="doLogin"
						openType="getPhoneNumber" color="#C62B2C">
					</u-button>
				</view>
			</view>
		</uni-popup>

		<u-tabbar :value="value" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#C62B2C"
			inactiveColor="#707070">
			<u-tabbar-item text="首页" @click="clickBar1" name="bar1">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/homeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/home.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="发布" @click="clickBar2" name="bar2">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/publishactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="../../../static/img/tabbar/publish.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="动态" @click="clickBar3" v-if="showXt" name="bar3">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/courseactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/course.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="收益" @click="clickBar5" name="bar5">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/incomeactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/income.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" @click="clickBar4" name="bar4">
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="../../../static/img/tabbar/mineactive.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="../../../static/img/tabbar/mine.png">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		getOrderCollect,
		getConfig,
		getConfig1,
		getCashAccount,
	} from '@/config/api.js'

	export default {
		data() {
			return {
				showXt: false,
				value: 'bar4',
				img: "https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84%2F%E5%9B%BE%E5%B1%82%206.png",
				user: uni.getStorageSync('UserInfo', null),
				ivcode: "",
				isRegister: false,
				income: null,
				show_support: false,
				CashAccountNum: 0
			}
		},
		onLoad(op) {
			if (op.ivcode) {
				this.ivcode = op.ivcode;
				uni.setStorageSync('ivcode', op.ivcode);
			}
		},
		onShow() {
			this.user = uni.getStorageSync('UserInfo', null);

			if (this.user != null || this.user != "")
				this.getCollect();

			this.getcofg();
		},
		methods: {
			getcofg() {
				getConfig().then(res => {
					if (res.value == 1) {
						this.showXt = true
					} else {
						this.showXt = false
					}
				})
				getConfig1().then(res => {
					if (res.value == 1) {
						this.show_support = true
					} else {
						this.show_support = false
					}
				})
			},
			goPage(page, type, needLogin) {
				if (needLogin && (this.user == null || this.user == "")) {
					uni.showToast({
						icon: 'none',
						title: '请登陆！',
						duration: 2000
					});
					return;
				}

				if (page == '/pages/center/income') {
					if (this.CashAccountNum <= 0) {
						uni.showModal({
							title: '提示',
							content: '未添加提现账户',
							confirmText: '去添加',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: "/pages/center/cashAccount"
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						})

						return;
					}
				}

				if (page == '/pages/center/invitation') {
					if (user.headimg == "") {
						uni.showToast({
							icon: 'none',
							title: '请先上传头像！',
							duration: 2000
						});
						return;
					}
				}

				uni.$u.route({
					url: page,
					type: type
				})
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			showPpo(e) {
				if (!this.user.id) {
					this.$refs.login.getOpenId(e);
					this.$refs.popup.open();
				}
			},
			doLogin(e) {
				uni.setStorageSync('ivcode', this.ivcode);
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					this.$refs.login.doLoginByPhone(e);
				}
				this.closePop();
			},
			closePop() {
				this.$refs.popup.close();
			},
			loginRes() {
				this.user = uni.getStorageSync('UserInfo');
			},
			loginError(err) {
				// this.ivcode = '';
				uni.setStorageSync('ivcode', this.ivcode);
				if (err.code == 0 && err.info == "请注册！") {
					this.isRegister = true;
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '未注册！',
					// 	duration: 2000
					// });
					this.showPpo();
				}
			},
			checkLogin() {
				this.$refs.login.checkLogin();
			},
			getCollect() {
				getOrderCollect().then(res => {
					this.income = res
				})
				getCashAccount().then(res => {
					this.CashAccountNum = res.wechat.length + res.ali.length + res.bank.length;
				})
			},
			onPageScroll(e) {
				uni.$emit('onPageScroll', e); //传递参数
			},
			onReachBottom(e) {
				uni.$emit('onReachBottom', e); //传递参数
			},
			onPullDownRefresh(e) {
				uni.stopPullDownRefresh();
			},
			clickBar1() {
				// this.value = 'bar1';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-1/tabbar-1'
				})
			},
			clickBar2() {
				// this.value = 'bar2';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-2/tabbar-2'
				})
			},
			clickBar3() {
				// this.value = 'bar3';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-3/tabbar-3'
				})
			},
			clickBar4() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/tabbar/tabbar-4/tabbar-4'
				})
			},
			loginOther() {
				uni.navigateTo({
					url: "/pages/center/login"
				})
			},
			clickBar5() {
				// this.value = 'bar4';
				uni.switchTab({
					url: '/pages/center/income'
				})
			},
		}
	}
</script>

<style scoped>
	.itemBaseBox {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex: 6;
	}

	.itemBase {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		margin-left: 20rpx;
		height: 130rpx;
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.bgVip {
		position: relative;
	}

	.vipText {
		position: absolute;
		top: 3px;
		left: 70rpx;
	}

	/deep/ .u-button--primary {
		border: none !important;
		background-color: transparent !important;
		width: 200rpx !important;
		font-weight: 600;
	}

	/deep/ .u-button__text {
		font-size: 38rpx !important;
	}

	.status {
		border: 1px solid #C62B2C;
		border-radius: 10rpx;
		padding: 4rpx 6rpx;
	}

	.incomeBox1 {
		width: 100%;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		min-height: 450rpx;
	}

	.incomeBox2 {
		background: url("https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/%E4%BC%9A%E5%91%98.png") no-repeat center center;
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.more {
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		padding: 4rpx 10rpx;
		font-size: 24rpx;
	}

	.incomeInfo {
		background: url("https://dtkj-qnyimg.diankuai.com/%E6%88%91%E7%9A%84/Layer%201%20%E6%8B%B7%E8%B4%9D.png") no-repeat center center;
		background-size: 100% 100%;
	}

	.incomeBtn {
		padding: 10rpx 20rpx;
		background-color: #131F4F;
		border-radius: 10rpx;
		width: 120rpx;
	}

	.now {
		font-size: 40rpx;
	}

	.now>text:last-child {
		font-size: 60rpx;
		font-weight: 600;
	}

	.pre {
		font-size: 30rpx;
	}

	.pre>text:last-child {
		font-size: 40rpx;
	}

	.income {
		justify-content: flex-end;
		align-items: flex-end;
	}

	.mdBaritem {
		width: 48%;
		border-radius: 10rpx;
	}

	.mdBar {
		justify-content: flex-start;
		align-items: flex-start;
		padding: 20rpx 0px;
		border: 10rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.popTitle {
		font-size: 40rpx;
		font-weight: 600;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	/deep/ .uni-popup__wrapper.center {
		width: 80%;
		border-radius: 20rpx;
	}

	.menuBox>image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.menuBox {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.menuParent {
		padding: 30rpx 0;
	}

	.otherMune {
		width: 100%;
		box-sizing: border-box;
		padding: 0px 20rpx;
	}

	.btmLogoBox {
		margin-top: 60rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.userinfo-avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.changeUser {
		margin-top: 40rpx;
		padding: 0 60rpx;
	}
</style>
